<template>
  <router-view></router-view>
</template>

<script>
import scroll from '@/util/scroll'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      screenWidth: null,
      timer: false
    }
  },
  mounted () {
    this.getNowWidth()
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {

    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        const that = this
        if (this.screenWidth <= 1152 && this.screenWidth > 856) {
          this.menuHide = true
        } else if (this.screenWidth > 1152) {
          this.sidebarHide = true

          this.menuHide = true
        } else if (this.screenWidth <= 856 && this.screenWidth > 540) {
          this.menuHide = true
        } else if (this.screenWidth <= 540) {
          this.menuHide = false
        }
        setTimeout(function () {
          // console.log(that.widths)
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 300)
      }
    }

  },
  methods: {
    // 获取当前屏幕的高度
    ...mapMutations(['updateTabbar', 'updateMenu', 'navbarHide', 'menusHide']),
    async getNowWidth () {
      this.screenWidth = await scroll.getClientWidth()
      if (this.screenWidth < 1152) {

      } else if (this.screenWidth > 1152) {

      }
      if (this.screenWidth <= 540) {
        // 给主页二级菜单触底内容
        this.updateMenu(this.menulist)
        this.menuHide = false

        // 隐藏手机端头部导航栏
        this.navbarHide(false)
        // 显示手机端头部菜单menumini
        this.menusHide(false)
        // 隐藏底部的导航栏
        this.updateTabbar(false)
      } else if (this.screenWidth > 540) {
        // 隐藏底部的导航栏
        this.updateTabbar(false)
        // 隐藏手机端头部导航栏
        this.navbarHide(false)
      }
    }
  }
}
</script>

<style>

</style>
